<template>
  <div class="lifecycle-container">
    <h1>Vue 生命周期钩子 (Composition API)</h1>
    <p>请打开浏览器控制台查看生命周期钩子的触发顺序。</p>
    <p>当前计数: {{ count }}</p>
    <button @click="count++">更新组件</button>

    <div class="hooks-explanation">
      <h2>生命周期钩子介绍</h2>
      <ul>
        <li>
          <strong>onBeforeMount:</strong>
          组件被挂载到 DOM 前调用。此时模板已经编译完成，但尚未渲染到页面上。
        </li>
        <li>
          <strong>onMounted:</strong>
          组件被挂载到 DOM 后调用。此时可以访问组件渲染出的 DOM 元素。
        </li>
        <li>
          <strong>onBeforeUpdate:</strong>
          当组件的响应式数据发生变化，即将重新渲染前调用。
        </li>
        <li>
          <strong>onUpdated:</strong>
          组件重新渲染完成后调用。
        </li>
        <li>
          <strong>onBeforeUnmount:</strong>
          组件实例被卸载前调用。此时组件仍然是完整的。
        </li>
        <li>
          <strong>onUnmounted:</strong>
          组件实例被卸载后调用。
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

console.log('--- 组件 setup ---');

const count = ref(0);

// 挂载前
onBeforeMount(() => {
  console.log('onBeforeMount: 组件即将挂载');
});

// 挂载后
onMounted(() => {
  console.log('onMounted: 组件已挂载');
});

// 更新前
onBeforeUpdate(() => {
  console.log('onBeforeUpdate: 组件即将更新');
});

// 更新后
onUpdated(() => {
  console.log('onUpdated: 组件已更新');
});

// 卸载前
onBeforeUnmount(() => {
  console.log('onBeforeUnmount: 组件即将卸载');
});

// 卸载后
onUnmounted(() => {
  console.log('onUnmounted: 组件已卸载');
});
</script>

<style scoped>
.lifecycle-container {
  padding: 20px;
  font-family: sans-serif;
}
button {
  margin-top: 10px;
  padding: 8px 16px;
}
.hooks-explanation {
  margin-top: 30px;
  padding: 20px;
  background-color: #f3f3f3;
  border-left: 4px solid #42b983;
}
ul {
  padding-left: 20px;
}
li {
  margin-bottom: 10px;
}
</style>
